<template>
<vue-plyr>
  <video
    controls
    playsinline
     :src="mvURL"
  >
    <source
      size="1080"
      :src="mvURL"
      type="video/mp4"
    />
    <!-- <track
      default
      kind="captions"
      label="English captions"
      :src="english"
      srclang="en"
    /> -->
  </video>
</vue-plyr>

</template>

<script lang="ts" setup>
import { useStore } from '@/store';
import { ref, onMounted, watchEffect,computed } from 'vue';
import emitterMv from "@/utils/mittEvent";
import emitterVideo from "@/utils/mittEvent";

const store = useStore()
const mvURL = ref('')

mvURL.value = store.state.music.mvUrl

// const mvURL = computed(()=>{
//   store.state.music.mvUrl
// })
const MVImg = ref('')


emitterMv.all.clear();

emitterMv.on("MV", (item :any) => {
store.dispatch('music/getMvUrl',item.id)
  MVImg.value = item.cover

mvURL.value = store.state.music.mvUrl
});

emitterVideo.on("Video", (item :any) => {
store.dispatch('music/getVideoUrl',item.vid)

mvURL.value = store.state.music.videoUrl
});



const audioRef = ref<HTMLElement | null>(null)
//

</script>
<style lang="less" scoped>
</style>
